<template>
  <div class="main-content">
    <a-divider>属性配置</a-divider>
    <!-- <div style="text-align: right;margin-bottom:4px;">
      <a-tooltip placement="top" title="新增属性">
        <a-button
          type="primary"
          icon="plus"
          @click="addFormItem"
          style="margin-right: 8px;"
        />
      </a-tooltip>
    </div> -->
    <a-table
      size="small"
      :columns="columns"
      :data-source="options"
      :pagination="false"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <template slot="value" slot-scope="text, record, index">
        <a-input
          v-model="text"
          size="small"
          disabled
          @change="cellDataHandle(text, 'value', index)"
        />
      </template>
      <template slot="label" slot-scope="text, record, index">
        <a-input
          v-model="text"
          size="small"
          @change="cellDataHandle(text, 'label', index)"
        />
      </template>
      <!-- <template slot="del" slot-scope="text, record, index">
          <a-icon class="del-icon" type="delete" @click="onDelete(index)" />
      </template> -->
    </a-table>
    <!-- <div>{{ options }}</div> -->
  </div>
</template>

<script>
const columns = [
  // {
  //   title: "标志",
  //   align: "center",
  //   dataIndex: "value",
  //   width: "100px",
  //   scopedSlots: { customRender: "value" }
  // },
  {
    title: "选项",
    align: "center",
    dataIndex: "label",
    width: "100px",
    scopedSlots: { customRender: "label" }
  },
  {
    title: "",
    align: "center",
    dataIndex: "del",
    width: "24px",
    scopedSlots: { customRender: "del" }
  }
];
export default {
  name: "PropertySetting",
  props: {
    settingOptions: Array
  },
  data() {
    return {
      columns: columns,
      options: [],
      defaultOption: {
        value: "",
        label: ""
      }
    };
  },
  mounted() {
    this.options = this.settingOptions;
    this.$emit("settingChange", this.options);
  },
  methods: {
    addFormItem() {
      this.options = [...this.options, { ...this.defaultOption }];
    },
    cellDataHandle(newValue, objKey, index) {
      let rowIndex = index;
      this.options.forEach((item, index) => {
        if (index == rowIndex) {
          item[objKey] = newValue;
        }
      });
      this.$emit("settingChange", this.options);
    },
    onDelete(index) {
      let rowIndex = index;
      const options = [...this.options];
      this.options = options.filter((item, index) => index !== rowIndex);
    }
  },
  watch: {
    settingOptions: {
      immediate: true,
      deep: true,
      handler: function(val) {
        if (val.length) {
          this.options = val;
        } else {
          this.options = [
            {
              value: "1",
              label: "通过"
            },
            {
              value: "0",
              label: "不通过"
            }
          ];
        }
      }
    }
  }
};
</script>
\
<style scoped>
.main-content {
  margin: 8px;
  margin-top: 0;
  padding: 16px;
  padding-top: 1px;
  background-color: rgb(252, 252, 252);
  border-radius: 4px;
}
.del-icon {
  font-size: 1.2em;
  cursor: pointer;
}
.del-icon:hover {
  color: #1890ff;
}
</style>
